<template id="message">
  <transition name="el-zoom-in-bottom">
      <div>
        <h1></h1>
        <el-button :plain="true" @click="open">Message</el-button>
        <el-button :plain="true" @click="openVn">VNo</el-button>
        <el-button :plain="true" @click="open2">success</el-button>
        <el-button :plain="true" @click="open4">error</el-button>
        <el-button :plain="true" @click="open3">warning</el-button>
      </div>
  </transition>
</template>

<script>
  export default {
    methods: {
      open () {
        this.$message('这是一条消息提示')
      },
      openVn () {
        const h = this.$createElement
        this.$message({
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ])
        })
      },
      open2 () {
        this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success',
          showClose: true
        })
      },

      open3 () {
        this.$message({
          message: '警告哦，这是一条警告消息',
          type: 'warning'
        })
      },

      open4 () {
        this.$message.error('错了哦，这是一条错误消息')
      }
    }
  }
</script>
